<template>
  <div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column
        prop="productName"
        label="品名"
        sortable
      ></el-table-column>
      <el-table-column
        prop="instrument"
        label="合约"
        sortable
      ></el-table-column>
      <el-table-column prop="direction" label="方向" sortable></el-table-column>
      <el-table-column
        prop="offset_flag"
        label="开/平"
        sortable
      ></el-table-column>
      <el-table-column prop="volume" label="手数" sortable></el-table-column>
      <el-table-column label="成交价区间" align="center">
        <el-table-column
          size="mini"
          style="width: 100px"
          prop="min_price"
          label="最小成交价"
        ></el-table-column>
        <el-table-column
          size="mini"
          style="width: 100px"
          prop="max_price"
          label="最大成交价"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        prop="commodity_unit"
        label="单位"
        sortable
      ></el-table-column>
      <el-table-column prop="currency" label="币种" sortable></el-table-column>
      <el-table-column prop="remarks" label="备注" sortable></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" v-if="btn" @click="closeBtn()"
        >选择</el-button
      >
      <el-button type="primary" size="mini" v-if="btns" @click="closeBtn()"
        >关闭</el-button
      >
    </div>
  </div>
</template>
<script>
import { futuresTrade } from "@/api/url_info.js";
export default {
  //指令明细弹框
  name: "orderDetail",
  props: ["strategyInfo", "closeValue"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      btn: true,
      btns: true
    };
  },
  created() {
    this.getData();
    if (this.closeValue == "check") {
      this.btn = false;
    } else {
      this.btns = false;
    }
  },
  methods: {
    async getData() {
      let that = this;
      let params = {
        command_name: that.strategyInfo.command_name,
        command_id: that.strategyInfo.command_id
      };
      await futuresTrade(params)
        .then(res => {
          that.tableData = [];
          let data = res.result.results;
          for (let i = 0; i < data.length; i++) {
            that.tableData[i] = {
              direction: data[i]["direction"],
              offset_flag: data[i]["offset_flag"],
              instrument: data[i]["instrument"],
              currency: data[i]["currency"],
              commodity_unit: data[i]["commodity_unit"],
              command_name: data[i]["command_name"],
              volume: data[i]["volume"],
              max_price: data[i]["max_price"],
              min_price: data[i]["min_price"],
              productName: data[i]["productName"],
              matchable_volume: data[i]["matchable_volume"],
              remarks: data[i]["remarks"],
              command_id: data[i]["command_id"],
              trade_id: data[i]["trade_id"],
              strategy_id: data[i]["strategy_id"],
              strategy_trade_id: data[i]["strategy_trade_id"],
              type: "期货"
            };
          }
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    closeBtn() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: "只能选择一条明细",
          type: "warning"
        });
      } else {
        this.$emit("closeMoule", this.multipleSelection);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 2% 0 0 90%;
}
</style>
